<template>
	<view class="container">

		<view style="height: 30px;text-align: center;padding: 0 10px;background-color: #f3f3f3;">
			<navigator url="/pages/cash/log?money_type=2" hover-class="navigator-hover">
			  <span style="float: right;line-height: 30px;">查看账单</span>
			</navigator>
		</view>
		
		<view class="example">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label="兑换类型" required>
					<uni-data-checkbox v-model="valiFormData.type" :localdata="types" />
				</uni-forms-item>
				<uni-forms-item label="账户地址" required name="address">
					<uni-easyinput v-model="valiFormData.address" placeholder="请输入账户地址" />
				</uni-forms-item>
				<uni-forms-item label="兑换金额" required name="price">
					<uni-easyinput v-model="valiFormData.price" placeholder="请输入兑换金额" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit('valiForm')">提交</button>
		</view>
	
	</view>
</template>
			 
<script>
	import * as PointsApi from '@/api/points'
	export default {
		data() {
			return {
				valiFormData: {
					type: 2,
					address: '',
					price: '',
				},
				appid:'',
				// 单选数据源
				types: [{
					text: '应用积分',
					value: 1
				}, {
					text: '商城积分',
					value: 2
				}],
				rules: {
					address: {
						rules: [{
								required: true,
								errorMessage: '请输入账户地址',
							}]
					},
					price: {
						rules: [{
							required: true,
							errorMessage: '请输入兑换金额',
						}]
					}
				}
			}
		},
		onLoad(options) {
			 this.getAppid()
		},
		methods: {
			
			getAppid(){
				// 获取appid设置appid
				const app = this
				uni.getStorage({
					key: 'appid',
					success: function (res) {
						console.log(res.data);
						app.appid=res.data;
					}
				}); 
			},
			
			// 触发提交表单
			// 触发提交表单
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					// 积分兑换操作
					const app = this
					app.valiFormData.appid=app.appid;
					app.valiFormData.money_type=2;
					console.log(app.valiFormData);
					PointsApi.cash(app.valiFormData)
					 .then(result => {
							if(result.status==200){
								uni.navigateTo({
								    url: '/pages/common/success'
								});
							}else{
								uni.navigateTo({
								    url: '/pages/common/error'
								});
							}  
					 })
					 .catch(err => {
						  uni.navigateTo({
						      url: '/pages/common/error'
						  });
					  })
					
				}).catch(err => {
					uni.navigateTo({
					    url: '/pages/common/error'
					});
				})
			}
		}
	}

</script>
<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	button {
		background-color: #ff6335 !important;
	}
	
	.uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checklist-text[data-v-2f788efd] {
	    color: #fe560a !important;
	}
	
	.uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .radio__inner[data-v-2f788efd] {
	    border-color: #e64340 !important;
	}
	
	.uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .radio__inner .radio__inner-icon[data-v-2f788efd] {
	    opacity: 1;
	    background-color: #e64340 !important;
	}
</style>

